nsbase.controls = new function () {
    var self = this;

}();

(function(){
	nsbase.controls.dropdownList = DropdownListFunc;

	function DropdownListFunc($container){
		var _self = this;
		_self.setSelectedValue = setSelectedValue;
		_self.getSelectedItem = getSelectedItem;
		_self.bindData = bindData;
		_self.selectChanged = null;

		var $dropdown = null,
			itemTmp = "";

		var cssClass = {
			selected:"selected",
			open:"open"
		}

		var utility = nsbase.utility;
		_init();
		function _init () {
			$container.addClass('select-menu');
			$dropdown = $('<a class="btn select-switch" href="javascript:;">\
							  <label>请选择...</label>\
							  <i class="arrow"></i>\
							</a>\
							<ul class="select-list">\
							  <li class="select-item selected">\
							    <a href="javascript:;" data-value="0">请选择...</a>\
							  </li>\
							</ul>');
			itemTmp = '<li class="select-item">\
					    <a href="javascript:;" data-value="${value}">${name}</a>\
					  </li>';
			$container.append($dropdown);
			var $button = $container.find('.btn'),
				$ddlList = $dropdown.find('li');

			$button.click(function(e) {
				e.stopPropagation();
				$container.toggleClass(cssClass.open);
			});

			$(document).click(function() {
				$(document).find('.' + cssClass.open).removeClass(cssClass.open);
			});
		}

		function bindData (listItems) {
			if(!listItems && listItems.length == 0){
				throw 'please provide a json array for dropdownList!';
			}
			var $itemContainer = $container.find('ul');
			$itemContainer.empty();
			$.each(listItems, function(index,item) {
				var itemHtml = utility.tmplFormat(itemTmp,item);
				$itemContainer.append(itemHtml);
			});

			$itemContainer.find('li').click(function() {
				var $sender = $(this);
				if($sender.hasClass(cssClass.selected)){
					$container.removeClass(cssClass.open);
					return false;
				}
				$itemContainer.find('.' + cssClass.selected).removeClass(cssClass.selected);
				$sender.addClass(cssClass.selected);
				$container.find('.btn label').text($sender.children('a').text());
				$container.removeClass(cssClass.open);
				if(_self.selectChanged){
					_self.selectChanged();
				}
			});
		}

		function setSelectedValue (value) {
			var $listItems = $container.find("li");
			if($listItems.length == 0){
				return false;
			}

			$.each($listItems, function(index, item) {
				 var itemValue = $(item).children('a').attr("data-value");
				 if(itemValue == value){
				 	$(item).addClass(cssClass.selected);
				 	$container.find('.btn label').text($(item).children('a').text());
					$container.removeClass(cssClass.open);
				 }
			});

		}

		function getSelectedItem () {
			var $selectItem = $container.find("li.selected").children('a');
			if($selectItem.length == 0){
				return null;
			}
			var item = {
				name:$selectItem.text(),
				value:$selectItem.attr("data-value")
			};

			return item;
		}

		

		


	}
})();
